<template>
	<view style="background-color: #151515; padding:0;  min-height: 100vh;">
		<view>
			<view class="search">
				<input
					    placeholder="搜索香号/配方名"
					    @input="searchKeyword"
						v-model="keyword"
						border="surround"
						class="input"
						style="background-color: rgb(48, 48, 48); "
						@focus="showSearch"
						placeholder-class="input-placeholder"
					/> 
				<view class="icon">
					<u-icon name="search" size="30"></u-icon>
				</view>
				<view class="result" v-if="isSearch">
					<scroll-view scroll-y="true" @scrolltolower="loadSearchMore" class="container"> 
						<view class="item" v-for="(item,index) in searchData" @click="setSearchResult(item)">
							<view class="code">{{item.hash}}</view>
							<view class="name">{{item.name}}</view>
						</view>
						<u-empty text="未搜索到结果" v-if="searchData.length == 0" textColor="#FFF"></u-empty>
					</scroll-view>
					
				</view>
			</view>
			
		</view>
		
		
	 	<view class="top-swiper" @click.stop="isSearch=false">  
			 <view class="box" > 
			
				<swiper :current="current"   
					:indicator-dots="false"  
					ref="mySwiper"  
					indicator   
					:acceleration='true'   
					indicatorMode="line"  
					@change="setCurSwiper" 
					:duration="swiperSpeed" 
					class="swiper" 
					:previous-margin="swiper.margin" 
					:next-margin='swiper.margin' 
					:circular="true" 
					@touchstart="touchStart"
					@touchend="touchEnd" 
					@animationfinish="swiperChange"> 
			 		<swiper-item catchtouchmove v-for="(item,index) in data" :key="index" :class="'itemSwpier ' +(swiper.index == index?'itemSwpierCur':'')" >			 			
							<view class='le-img'  :class="{'le-active':swiper.index == index}"
								:style="{ 'background':'url('+imgHost+'/statics/assets/dialogBg.png) no-repeat top center','background-size':'100% 100%'}"
							>	

								<view class="name" >
									<view class="editName" style="margin: 0 auto;" >{{hash.name}}</view>
									
								 </view>
								
								<view class="codeBox">
									<view class="code" @click="copyText(item.code)">唯一香号：{{item.hash}} </view> 
								</view> 
								
								<view style="height: 40rpx;">
									<view class="dotTop"></view> 
								</view>
								<scroll-view scroll-y="true"  class="scroll-intro" ><view  id="scroll_intro" class="intro" v-html="item.intro"></view></scroll-view> 
								<view>
									<view class="nickname">
										
										<view class="right">
			
											<text style="font-size: 22rpx;">
												
												调香师：
											</text>
											<text class='username'>
												{{hash.truename}}
											</text>
											
										</view>
									</view>
								</view>
								<view class="bottom" :style="{'margin-top':'50rpx'}">
									<view class="left">
										<view class="line"></view>
									</view>
									<view class="right" style="font-weight: bold;">Al调香实验室</view>
								</view>
							</view>
			 		</swiper-item>
			 	</swiper> 
				
				<swiper 
				  class="indicator-swiper scroll-view"
				  :indicator-dots="false"				 
				  :current="current"
				  :acceleration='true'
				  @change="handleIndicatorChange"
				  circular
				  :autoplay="false" 
				  :duration="300" 
				  :scroll-with-animation="true"
				  :effect3d='true' 
				  @touchstart="touchStart"
				  @touchend="touchEnd" 
				  
				>
				</swiper>  
				 
			 </view>  
			  
			
				<view class="pg_bottom">
					
					
					
					<view class="flex " style="display: flex; margin: 30rpx 30rpx 20rpx 30rpx;">
						<view class="btn btn1" style="width: 100%;" >
							<a class="sure" :href="'weixin://dl/business/?appid=wxc7263c90fa4f4399&path=pages/tiaoxiang/share&query='+encodeURIComponent('hash='+hash.hash)">点击打开微信小程序定制该款香氛</a> 
						</view>
					</view>
					
				</view>
			 <view style="height: 10rpx;"></view>
		</view> 
		
	</view>
</template>
  
<script>  
import store from "@/store";
import cfg from '@/config/app';
import Cache from '@/utils/cache';
import cardSwiper from "@/components/helang-cardSwiper/helang-cardSwiper"
import { 
	manage,
	getHashByCode,
	share,
	search
} from '@/api/hash';
import FakeProgress from 'fake-progress'
	export default {
		data() {
			return {
				isSubmit : 0,
				imgHost : '',
				keyword : '',
				isLock : false,
				isSearch : false,
				searchData : [],
				isSearchResult : false,
				hash: {
					'name' : '',
					'intro' : '',
					'staff' : '',
				},
				data : [],
				swiper: {
					margin: "100rpx",
					index: 0,
					
				},
				current:0,
				slider:50,
				
			}
		},
		components:{
			cardSwiper
		},
		watch:{
			slider(newValue,oldValue){
				if ( newValue != oldValue ){					
					this.runSwiper(newValue);
				}
				
			},
			
		},
		
		computed: {  
		  
		}, 
		
		onLoad(option){
			this.imgHost = cfg.HTTP_REQUEST_URL;
			this.code = option.hash || '';
			this.init();
		},
		
		methods:{ 	   
			clickBackindex(){
				this.$util.JumpPath('/pages/index/index');
			},
			clickSaveResult(){
				this.saveResultShow = true
			}, 
			
			touchStart(e) {
			 if(this.data?.length==1) return false 
			  this.touchStartX = e.touches?.[0].clientX;
			  this.touchStartY = e.touches?.[0].clientY;
			  this.touchStartTime = e.timeStamp;
			},
			touchEnd(e) {
				if(this.data?.length==1) return false 
			  let endX = e.changedTouches?.[0].clientX;
			  let endY = e.changedTouches?.[0].clientY;
			  let endTime = e.timeStamp;
					
			  let deltaX = endX - this.touchStartX;
			  let deltaY = endY - this.touchStartY;
			  let duration = (endTime - this.touchStartTime) / 1000; // 转换为秒
					
			  // 计算滑动力度（这里简单使用距离除以时间）
			  let forceX = Math.abs(deltaX) / duration;
			  let forceY = Math.abs(deltaY) / duration; 
			  // 判断滑动方向
			  if (Math.abs(deltaX) > Math.abs(deltaY)) {
				if (deltaX > 0) {
				  console.log("右滑，力度：", forceX);
				  this.rightForceX = forceX;
				  if(this.rightForceX>1500){
					  this.current = this.current-2
				  }
				  
				} else {
				  console.log("左滑，力度：", forceX);
				  this.leftForceX = forceX
				  if(this.leftForceX>1500){
				  	 this.current = this.current+2
				  }
				}
			  }  
			},
			
			handleSwiperChange(event) {
			  this.current = event.detail.current; 
			  this.updateIndicatorIndex();
			},
			handleIndicatorChange(event) {
			  this.indicatorCurrentIndex = event.detail.current;
			  this.current = event.detail.current;
			  // this.current = this.indicatorCurrentIndex * (this.visibleDotRange * 2 + 1);
			},
			updateIndicatorIndex() {
			  this.indicatorCurrentIndex = Math.floor(this.current / (this.visibleDotRange * 2 + 1));
			},  
			showSearchResult(){
				this.page=1
				this.getData();
				this.isSearchResult=false;
			},
			initScrollHeight() {
				uni.createSelectorQuery()
				.in(this)
				.select('#scroll_intro')
				.boundingClientRect(data => {
					if (data) {
						this.introScrollTop = data.height 
					}
				})
				.exec();
			},
			setLock(e){
				console.log(e);
				this.isLock = e;
			},
			
			stopSwiper(){
				this.isSwiper = false;
				clearInterval(this.interval);
			},
			
			getHash(hash){
				getHashByCode(hash).then(res =>{
					this.data.push(res.data); 
					
					this.hash.name = res.data.name;
					this.hash.intro = res.data.intro;
					this.hash.truename = res.data.truename;
					this.hash.hash = res.data.hash;
					this.hash.id = res.data.id;
					
					 uni.hideLoading()
				}).catch(e =>{
					console.log(e);
					  uni.showToast({
						title:e
					  })
				})
			},
			setSearchResult(item){  
				this.isSearch = false;
				this.isSearchResult = 1;
				this.data[0] =item;
				// this.data.push();
				this.hash.name = item.name;
				this.hash.id = item.id;
				this.current = 0
			},
			showSearch(e){
				this.searchKeyword(e);
				this.isSearch = true;
			},
			searchKeyword(e){
				this.searchPage = 1;
				this.searchData = [];
				this.keyword = e.detail.value;
				this.isSearch = false;
				
				this.isSearch = true;
				this.getSearchResult();
				
			},
			getSearchResult(){
				search({page:this.searchPage,"keyword":this.keyword,'myself':this.showMyself ? 1 : 0,'only':this.action == 'official' ? 1 : 0}).then(res =>{
					res.data = res.data.data;
					console.log(res.data);
					for(var i in res.data){
						this.searchData.push(res.data[i]);
					}
					
				}).catch(e =>{
					
				})
			},
			loadSearchMore(){
				this.searchPage ++;
				this.getSearchResult(this.keyword);
			},
			setSlider(e){ 
				let value = e.detail.value;
				this.slider = value;
				this.isSliderBtn = true;
				this.swiperPosition = value < 50 ? 'left' : 'right';
				let v = 0;
				if ( this.swiperPosition  == 'left' ){
					v =  (100 - (50 +  value));
					
				}else{
					v =  value - 50;
					
				}
				this.swiperSpeed = 1000 - (v*15);
				console.log('aa',this.swiperSpeed);
				/*
				this.runSwiper(value);*/ 
			},
			setItemName(e){
				this.editNameStr = e;
			},
			editName(item){  
				this.editNameShow=true;
				this.curItem = item;
				this.editNameTxt = item.name; 
			},

			resetSlider(){
				this.slider = this.slider ==  50.1 ? 50 : 50.1;
				this.swiperRunning = false;
				this.startSwiper = false;
				this.isSliderBtn = false;
				
			},
			runSwiper(value){
				this.startSwiper = true;
				if ( this.swiperPosition == 'right' && this.slider > 51){
					if ( this.isRightAllData ){
						uni.$u.toast("所有配方加载完毕");
						return false;
					}
					if ( !this.swiperRunning && !this.isRightAllData ){
						this.swiperRunning = true;
						if ( this.current >= 9 ){
							this.current =0
							
						}else{
							this.current ++;
						}
						console.log('cur',this.current);
						
					}
				}
				if ( this.swiperPosition == 'left' && this.slider < 50 ){
					if ( this.isLeftAllData ){
						uni.$u.toast("所有配方加载完毕");
						return false;
					}
					this.startSwiper = false;
					console.log(this.startSwiper);
					if ( !this.swiperRunning ){
						this.swiperRunning = true;
						console.log(this.current);
						if ( this.current == 0 ){
							this.current =9
						}else{
							this.current --;
						}
						console.log(this.current);
						
					}
				}
				
			},
			
			setCurSwiper(e){ 
				this.current = e.detail.current;
				this.handleSwiperChange(e); 
				this.swiper.index = e.detail.current;
				this.form.name = this.data[this.swiper.index].name;
				this.form.truename = this.data[this.swiper.index].truename;
				this.form.id =  this.data[this.swiper.index].id;
				this.form.code =  this.data[this.swiper.index].code;
				
				if ( !this.isSliderBtn ){
					this.current = e.detail.current;
				}
				
				if ( this.current < e.detail.current ){
					console.log('dd',this.current);
					if ( this.swiper.index >= 9 ){
						this.current = 0;
						this.page ++;
						this.getData();
					}
				}
			},
			//swiper滑动事件
			swiperChange: function(e) {
				this.swiper.index = e.detail.current;
				if ( (this.swiperPosition == 'left' && this.slider < 50)  ){
					if ( this.page <=1 && this.current == 0 ){
						uni.$u.toast("所有配方加载完毕");
						this.current = 0;
						this.isLeftAllData = true;
						return false;
					}
					this.current --;
					console.log('dddd',this.current);
					if ( this.current < 0 ){
						this.current = 9;
						this.page --;
						this.getData();
					}
					
				}
				
				if ( this.swiperPosition == 'right' && this.slider >= 51){
					this.current ++;
					console.log('dddd',this.current);
					if ( this.current >= 9 ){
						this.current = 0;
						this.page ++;
						this.getData();
					}
				}
				
			},

			init(){
				this.getHash(this.code);
				
			},
			
	
			
			doCopy(){
				copyStaff({id:this.form.id,isLock:this.isLock ? 1 : 0,isOfficial:this.isOfficial? 1 : 0}).then(res =>{
						this.form.code = res.data.hash;
						this.success = true;
				  }).catch(e =>{
					  uni.showToast({
						icon:'none',
						'title': e.msg
					  })
				  })
			},
			copyText(text){
				console.log('ddd');
				uni.setClipboardData({
				        data: text,
				        success() {
				          uni.showToast({
				            title: '复制成功',
				            icon: 'success'
				          });
				        }
				      });
			},
			submit(){
				if ( this.isSubmit == 0 && this.isLock == 1 ){
					console.log('ddd');
					  uni.showModal({
						content:'锁定订单后，您的香氛将安排生产，但无法15分钟内重新调整配方，是否继续？',
						confirmText:'帮我锁定',
						cancelText:'还不确定',
						success: res =>{
							this.isSubmit = 1;
							if ( res.confirm ){
								this.isLock = 1;
								this.doConfirm();
								return false;
							}else{
								this.isLock = 0;
								return false;
							}
										
						}
					  })
					 console.log('cccd');
				}else{		  
					console.log('ccc');
					this.doConfirm();
				}
			},
			
			setAgreement(n){
				this.isLock = n;
			},
			
		}
	}
		
</script>

<style lang="scss">
	page{
		background-color: #151515;
		height: 100%;
	}
	:deep(.u-popup__content){
		border-radius:12rpx;
	}
	.savePop .content{
		width: 640rpx;
		// background: url(@/assets/dialoBg.png) top center no-repeat;
		background-size: 100% 20rpx; 
		border-radius:12rpx;
		.content1{
			padding: 80rpx 60rpx 60rpx 60rpx; 
			line-height: 40rpx;
		}
		.bottomPop{
			line-height: 96rpx;
			display: flex;
			border-top:1rpx solid rgb(214, 215, 217);
			.btn{
				width: 33.3%;
				text-align: center;
				line-height: 96rpx;
				color: #666;
			}
			.btn:first-child{
				border-right:1rpx solid rgb(214, 215, 217);
			}
			.btn3{
				background-color: #1f1f1f;
				color:#fff;
			}
		}
	}
	.header{
		color: #FFF;
		display: flex;
		width: 100%;
		padding: 30rpx 120rpx 0 120rpx ;
		align-items: baseline;
		justify-content: space-between;
		.title{
			font-size: 30rpx;
		}
		.checkbox{
			
		}
	}
	.search{
		margin-top: 0;
		.u-border{border:1px solid #666666}
		position: relative;
		padding: 20rpx 120rpx 20rpx 120rpx;
		.icon{
			position: absolute;
			top: 30rpx;
			right: 120rpx;
		}
		.input{
			color: #FFF;
			border-bottom:1px solid #666666;
			padding: 10rpx;
			// border-radius: 10rpx;
		}
		.input-placeholder{
			color: #666666;
		}
		.result{
			width: 100%;
			
			position: absolute;
			
			z-index: 1000;
			left: 0;
			padding: 20rpx;
			.container{
					box-sizing: border-box;
					height: 400rpx;
					background-color: #000;
					padding: 10rpx;
					.item{
						padding: 20rpx;
						display: flex;
						justify-content: space-between;
						border-bottom: 1px solid #666666;
						.name{
							color: #FFF;
						}
						.code{
							color: #c49c4c;
						}
					}
			}
			
		}
	}
	.stop{
		color: #FFFFFF;
		text-align: center;
	}
	.slider{
		margin-top: 20rpx;
		padding: 0 ;
		.btn{
			margin-top: 40rpx;
		}
	}
	.top-swiper{
		margin:35rpx 0  30rpx 0; 
		width: 100%;
		height: 100%;
		// overflow-x: hidden;
		-webkit-text-size-adjust: none;
		-webkit-user-select: none;
		-moz-user-select: none;
		-ms-user-select: none;
		user-select: none;
		padding-bottom:70px;
		
		.bg{
			padding-top: var(--status-bar-height);
			box-sizing: content-box;
			width: 100%;
			position: relative;
			
			.placeholder{
				box-sizing: content-box;
				padding-top: 600rpx;
				height: 44px;
			}
			
			.image{
				box-sizing: content-box;
				position: absolute;
				z-index: 1;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				overflow: hidden;
				
				&::after{
					content: '';
					position: absolute;
					width: 100%;
					height: 100%;
					z-index: 1;
					bottom: 0;
					left: 0;
					height: 65%;
				
				}
				
				> image{
					position: absolute;
					box-sizing: content-box;
					padding: 60px;
					top: 0;
					left: 0;
					width: 100%;
					height: 80%;
					top: -60px;
					left: -60px;
					filter: blur(50px);
				}
			}
		}
		
		.box{
			padding-top: var(--status-bar-height);
			box-sizing: content-box;
			width: 100%;
			height: auto;
			position: relative;
			// padding-bottom:100rpx;
		}
		
		.swiper {
			height: 820rpx;
			margin: 0rpx;
			padding-bottom: 20rpx;
			overflow: visible!important;
			.le-img {
				// overflow: hidden;
				// background: url(@/assets/dialogBg.png);
				background-size: 100% 100%;
				border-radius: 0!important;
				background-color:transparent!important;
				.current{
					position: absolute;
					right: 20rpx;
					top: 20rpx;
				}
				.new{
					position: absolute;
					background-color: rgb(170, 0, 0);
					left: -28rpx;
					top:20rpx;
					width:150rpx;
					height: 50rpx;
					line-height: 50rpx;
					text-align: center;
					font-size: 30rpx;
					font-weight: bold;
					color: #FFF;
					// padding:60rpx 20rpx 20rpx 20rpx;
					 transform: rotate(-35deg); 
				}
				.saveHasMaske{
					position: absolute;
					background-color: rgb(170, 0, 0);
					left: -30rpx;
					top:15rpx;
					width:240rpx;
					height: 50rpx;
					line-height: 50rpx;
					text-align: center;
					font-size: 30rpx; 
					color: #FFF;
					// padding:60rpx 20rpx 20rpx 20rpx;
					 transform: rotate(-15deg); 
				}
				.saveNoMaske{
					width:280rpx;
					font-size: 26rpx; 
					background-color: #888;
				}
				.name{
					font-size: 40rpx; font-weight: bold;
					text-align: center;
					 padding: 135rpx 0 10rpx 0;
					 display: flex;
					}
				.name1{
					font-size: 40rpx; font-weight: bold;
					text-align: center;
					
					 padding: 135rpx 0 10rpx 0;
					  display: flex;
					}
				.name2{
					font-size: 40rpx; font-weight: bold;
					text-align: center;
					
					 padding: 135rpx 0 10rpx 0;
	
					}
				.code{
					font-size: 18rpx;
					background-color: #000;
					border-radius: 50rpx;
					color: #FFF;
					padding: 10rpx 10rpx;
					text-align: center;
					margin: 0 auto;
					margin:0 36rpx;
					
				}
				#scroll_intro{
					line-height: 36rpx;
					display: flex; 
					align-items: first baseline;
					
				}
				.scroll-intro{
					font-size: 18rpx;
					line-height: 36rpx;
					height: 280rpx; 
					margin-top: 20rpx;
					display: flex;
					
				}
				.intro{
					font-size: 21rpx;
					overflow-y: auto; 
					line-height: 36rpx;
					height: 280rpx; 
					margin-top: 0rpx;
					padding-bottom: 40rpx;
					box-sizing: border-box;
					padding: 0rpx 18rpx;
				}
				.reload-intro{
					margin-top: 20rpx;
					left:60rpx;
					position: absolute;
				}
				.nickname{
					display: flex;
					justify-content: space-between;
					font-size: 26rpx;
					
					
					.left{
						flex: 1;
					}
					.right{
						display: flex;
						align-items: center;
						justify-content:flex-end;
						.username{
							padding:30rpx 0;
							font-size: 22rpx;
						}
					}
				}
				.bottom{
					justify-content: space-between;
					display: flex;
					align-items: center;
					.left{
						flex: 1;
						.line{
							height: 2px;
							background-color: #000;
						}
					}
					.right{
						margin-left: 20rpx;
						display: flex;
						font-size: 22rpx;
						align-items: center;
					}
				}
				width: 100%;
				height: 100%;
				display: block;
				transform: scale(0.9);
				background-color: #FFF;
				transition: transform 0.3s ease-in-out 0s;
				border-radius: 30rpx;
				padding: 0rpx 60rpx;
				&.le-active {
					transform: scale(1);
				}
			}
		
		}
	}
	.pg_bottom{
		color: #FFF;
		font-size: 22rpx;
		padding: 0 30 rpx;
		margin: 20rpx auto 30rpx auto;
		position: relative;
		.search_back{
			width: 100%;
			
			text-align: center;
			top: -180rpx;
			z-index: 100;
			.btns{margin: 0 auto;
			border-radius: 10rpx;
				background-color: #37383c;
				width: 200rpx;
				padding: 20rpx;
				margin: 0 auto;
			}
		}
		.checkbox{
			width: 550rpx;
			display: flex;
			align-items: center;
			margin: 0 auto;
			// opacity: 0.8;
			color: #999;
			// justify-content:center
			padding-left:60rpx
		}
		.btn{
			margin: 30rpx 30rpx 50rpx 30rpx;
			background-color: #37383c;
			padding: 20rpx;
			border-radius: 10rpx;
			display: flex;
			flex-direction: row;
			flex-wrap: wrap;
			text-align: center;
			align-items: center;
			
			.tips{
				width: 100%;
				font-size: 20rpx;
				margin-top: 20rpx;
				color: #ddd;
			}
			.sure{
				width: 100%;
				color: #FFF;
				text-decoration: none;
				font-size: 30rpx;
				font-weight: bold;
			}
		}
		.btn1{
			margin: 30rpx 10rpx;
			padding: 30rpx 0;
		}
	}
	.overlay-warp{
		width: 80%;
		margin: 500rpx auto;
		.tip{
			color: #FFF;
			text-align: center;
			margin-bottom: 20rpx;
			font-size: 25rpx;
			line-height: 35rpx;
		}
		.status{
			color: #FFF;
			text-align: center;
			margin-bottom: 20rpx;
			font-size: 40rpx;
		}
	}
	.progress-warp{
	
		display: flex;
		align-items: center;
		justify-content: center;
		flex-wrap: wrap;
		flex-direction: row;
		height: 100%;
		.status{width: 100%;}
	}
	.success{
		
		background-color: #000;
		padding: 30rpx;
		border-radius: 20rpx;
		.title{
			color: #fff;
			font-size: 32rpx;
			line-height: 1.5;
			margin-top: 40rpx;
		
		}
		.code{
				color: #c49c4c;
				font-size: 40rpx;
				text-align: center;
				margin: 20rpx 0;
		}
		.haxi2{
			font-size: 26rpx;
			color: #fff;
			margin-bottom: 40rpx;
			line-height: 1.8;
			text{
				color: #c49c4c;
			}
			
		}
		.text_white{
			color: #fff;
			font-size: 40rpx;
			text-align: center;
		}
		.haxi1{
			color: #fff;
			
			margin-bottom: 50rpx;
			.t1{
				font-size: 60rpx;
				margin-bottom: 20rpx;
			}
			.status{
				margin-top: 50rpx;
				font-size: 30rpx;
				color: #c49c4c;
				
			}
		}
		.haxi3{
			background-color: #37383c;
			display: flex;
			align-items: center;
			justify-content: center;
			color: #fff;
			font-size: 28rpx;
			border-radius: 10rpx;
			margin: 0 auto;
			padding: 30rpx;
		}
	}
	.reload{
		display: flex;
		color: #FFF;
		justify-content: center;
		align-items: center;
		font-size: 30rpx;
		text-align: center;
		margin: 0 auto;
		width: 200rpx;
		padding: 0 0 20rpx 0rpx;
	}
	.btBottom{
		left: 0;
		z-index: 99; 
		background-color: rgb(63, 64, 68);
		margin: 0rpx 30rpx 50rpx 30rpx;
		box-sizing: border-box;
		background-color: #37383c;
		padding: 20rpx;
		border-radius: 10rpx;
		width:calc(100% - 60rpx);
		text-align: center;
		.tips{
			width: 100%;
			font-size: 20rpx;
			margin-top: 20rpx;
			color: #ddd;
		}
		.sure{
			width: 100%;
			font-size: 30rpx;
			font-weight: bold;
		}
	}
	.flex{
		display: flex;
	}
	.dotTop{
		width: 8px;
		height: 8px;
		background-color: #000;
		transform: rotate(45deg);
		margin: 60rpx auto 0  auto;
	}
	
	
	 .indicator { 
		 position: absolute;
		 bottom: -400px; /* 根据需要调整位置 */
		 left: 50%;
		 transform: translateX(-50%);
		 display: flex;
		 align-items: center;
		 z-index: -1;
		 
		 padding: 30px 0;
	        @include flex(row);
	        justify-content: center;
	
	        &__dot {
	             height: 6px;
	             width: 6px;
	             border-radius: 100px;
	             background-color: rgba(255, 255, 255, 0.35);
	             margin: 2px 5px;
	             transition: background-color 0.3s;
	    
	            &--active {
					height: 10px;
					width: 10px;
					margin: 0px 5px;
	                background-color: #ffffff;
	             }
	        }
	    } 
		
	 .indicator-num {
			padding: 2px 0;
			background-color: rgba(0, 0, 0, 0.35);
			border-radius: 100px;
			width: 35px;
			@include flex;
			justify-content: center;
	
			&__text {
				 color: #FFFFFF;
				 font-size: 12px;
			 }
		}
		
		.uni-swiper-wrapper{
			overflow: auto;
		}
	:deep(.uni-swiper-wrapper){
		overflow: visible!important; 
	}	
	.itemSwpier{
		overflow: visible!important; 
		opacity:0.4;
		padding-top: 20rpx;
	}
	.itemSwpierCur{
		opacity:1;
	} 
	.swiper-item-content {
	  display: flex;
	  align-items: center;
	  justify-content: center;
	  height: 100%;
	}
	.indicator-swiper {
	  height: 150rpx;
	  position: absolute;
	  bottom: -50rpx;
	  left: 0rpx;
	  width: 100%;
	  width: calc(100%);
	  // margin: 0 50rpx;
	  box-sizing: border-box;
	  overflow: hidden;
	}
	.indicator-group {
	  display: flex;
	  align-items: center;
	  justify-content:space-around;
	}
	.indicator-dot {
	  width: 28rpx;
	  height: 28rpx;
	  border-radius: 50%;
	  background-color: #fff;
	  margin: 0 1rpx;
	  transition: transform 0.3s, background-color 0.3s;
	}
	.indicator-dot.active {
	  // background-color: green; 
	  transform: scale(0.2);
	  opacity: 0.2;
	}
	.indicator-dot.active1 { 
	  transform: scale(0.3);
	  opacity: 0.3;
	}
	
	.indicator-dot.active2 { 
	  transform: scale(0.4);
	  opacity: 0.4;
	}
	
	.indicator-dot.active3 { 
	  transform: scale(0.45);
	  opacity: 0.45;
	}
	.indicator-dot.active4 {
	  transform: scale(0.5);
	  opacity: 0.5;
	}
	.indicator-dot.active5 {
	  transform: scale(0.55);
	  opacity: 0.55;
	}
	.indicator-dot.active6 {
	  transform: scale(0.6);
	  opacity: 0.6;
	}
	.indicator-dot.active7 {
	  transform: scale(0.65);
	  opacity: 0.65;
	}
	.indicator-dot.active8 {
	  transform: scale(0.7);
	   opacity: 0.7;
	   
	}
	.indicator-dot.active9 {
	  transform: scale(0.8);
	   opacity: 0.8;
	} 
	.indicator-dot.active10 {
	  transform: scale(0.9);
	  opacity: 0.9;
	}
	.indicator-dot.active11 { 
		transform: scale(1); 
		background-color: #fff;
	 }
   .indicator-dot1{
	   transform: scale(0.1); 
   }
	
	.scroll-view {
	  white-space: nowrap;
	  width: 100%;
	}
	
	.dialogBox{ 
		min-height: 300rpx;
		margin:0 40rpx;  
		position: relative;
		.saveHasMaske{
			position: absolute;
			background-color: rgb(170, 0, 0);
			left: -30rpx;
			top:15rpx;
			width:440rpx;
			height: 50rpx;
			line-height: 50rpx;
			text-align: center;
			font-size: 30rpx; 
			color: #FFF; 
			transform: rotate(-15deg); 
		}
		.headerTop{
			position: absolute;
			top:20px;
			right: 0%;
			// width: 95%;
			z-index: 9999; 
			text-align: right;
			.saveHasMaske{
				left: -40rpx;
				top:5rpx;
			}
		}
		
		.logoh{
			width: 213rpx;
			height: 168rpx;
			margin: 0 auto;
			display: block;
			padding-bottom: 30rpx;
		}
		.dialogBoxCon{
			// background: url(@/assets/dialogBg.png);
			background-size: 100% 100%;
			padding: 50rpx 50rpx 50rpx 50rpx; 
			position: relative;
			.til_code{
				width: 100%;
				height: 80rpx;
				background-color: #000;
				color:#fff;
				line-height: 80rpx;
				font-size: 46rpx;
				text-align: center;
				
			}
			.info1,.info2{
				padding: 30rpx 0;
				border-bottom: 1px solid #000;
				margin-bottom: 30rpx;
				line-height: 50rpx;
				font-size: 30rpx;
				// font-weight: bold;
				color: #000;
				position: relative;
			}
			.codeImg{
				position: absolute;
				right:20rpx;
				top:40rpx;				
				image{
					width: 120rpx;
					height: 120rpx;
				}
			}
			.info2{
				font-size: 24rpx;
				line-height: 46rpx;
				padding: 0rpx 0 20rpx 0;
				border-bottom: none;
			}
			.info2 h2{
				text-align: center;
			}
			.haxi3{
				// background: url(../../assets/dialog_bt.png) no-repeat;
				background-size: 100% 86rpx;
				color: #fff;
				font-size: 36rpx;
				line-height: 86rpx;
				text-align: center;
				font-weight: bold;
			} 
			 
		}
		.close{
			text-align: right;
			position: absolute;
			right:40rpx;
			top:30rpx;
			.btnClose{
				width: 47rpx;
				height: 47rpx;
				margin-right: -20rpx;
			}
		}

	}
	
	.rgClose{
		position: absolute;
		right: 30rpx;
		top:30rpx;
	}
	
	.codeBox{
		position: relative;
		.reload{
			position: absolute;
			right: -100rpx;
			top:0rpx;
		}
	}
	.resetBtn{
		display: flex;
		align-items: center;
		justify-content: center;
		color: #fff;
		font-size:26rpx;
		padding-top:40rpx;
	}
	
	.dotSwiper{
		width: 4.75%!important; 
		height: 50rpx!important; 
	}

	
	.shareBox{
		margin: 0 auto; 
		width: 720rpx; 
		.headerTop{
			position: relative;
			.close{
				position: absolute;
				top:-15rpx;
				right:60rpx;
			}
		}
		.shareBtn{
			width: 100%;
			height: 80rpx;
			line-height: 80rpx;
			color: #fff;
			background-color: #37383c; 
			text-align: center;
			border-radius: 10rpx;
			margin-top: 20rpx;
		}
	}
	.poster-canvas{ 
		// display: flex;
		// justify-content: center; /* 水平居中 */
		// align-items: center; /* 垂直居中 */
		// height: 100vh; /* 使用视口高度 */ 
		margin: 0 auto; 
		position: relative; 
		width: 750rpx;
		#canvas{
		  width: 750rpx; 
		  // position: absolute;
		  // left:calc(50% - 375rpx);
		  // top:200rpx; 
		}
	}
	
 
</style>
